<template>
  <div class="appsy">
    <!-- <div class="app-top"></div> -->
    <div class="nav">
      <img @click="callBack1" src="./imgs/jianto.png" alt="" />
      <span>分类</span>
    </div>
    <div class="details">
      <h3 style="font-size: 30px; margin-left: 30px;">
        请选择分类或添加
      </h3>
      <div class="details-1">
        <div class="fenlei">
          <img
            src="./imgs/7fddb14b807a0a1ad2db3745b24ae09e7ce44155a980-1hvnr5_fw658 小的副本.png"
            alt=""
          />
          <p class="ziti">雅诗兰黛</p>
        </div>
        <div class="fenlei">
          <img
            src="./imgs/49333c30f0013cdac9c4cfd3577a74aaed753b5b9257-lkFm6I_fw658 小的副本.png"
            alt=""
          />
          <p class="ziti">科颜氏</p>
        </div>
        <div class="fenlei">
          <img
            src="./imgs/395eec08dd64760b21ecdee04070ff91ec2919ec5dce-KJ1hIQ_fw658 小的副本.png"
            alt=""
          />
          <p class="ziti">珂润</p>
        </div>
        <div class="fenlei">
          <img src="./imgs/WechatIMG904.png" alt="" />
          <p class="ziti">安热沙</p>
        </div>
        <div class="fenlei">
          <img src="./imgs/WechatIMG905.png" alt="" />
          <p class="ziti">娇韵诗</p>
        </div>
        <div class="fenlei">
          <img src="./imgs/WechatIMG906.png" alt="" />
          <p class="ziti">欧莱雅</p>
        </div>
        <div class="fenlei">
          <img src="./imgs/WechatIMG907.png" alt="" />
          <p class="ziti">兰蔻</p>
        </div>
        <div class="fenlei">
          <img src="./imgs/WechatIMG908.png" alt="" />
          <p class="ziti">资生堂</p>
        </div>
      </div>
    </div>
    <div class="bom">
      <div class="bom1">
        <h3 class="biaoti">型号榜</h3>
        <div class="dity">
          <p class="oop">氨基酸洗面奶</p>
          <p class="oop1">温和洁面</p>
          <div class="oop2">
            <img src="./imgs/jifen_icon_fanhui(1).png" alt="" />
          </div>
        </div>
      </div>
      <div class="bom1">
        <div class="dity" style="background: #e8f7f4;">
          <p class="oop" style="color: #4c9489;">顶级洗面奶</p>
          <p class="oop1" style="color: #4c9489;">贵妃标配</p>
          <div class="oop2">
            <img src="./imgs/jifen_icon_fanhui(1).png" alt="" />
          </div>
        </div>
      </div>
      <div class="bom1">
        <div class="dity" style="background: #f8eced;">
          <p class="oop" style="color: #cc7473;">便宜大碗</p>
          <p class="oop1" style="color: #cc7473;">价廉物美</p>
          <div class="oop2">
            <img src="./imgs/jifen_icon_fanhui(1).png" alt="" />
          </div>
        </div>
      </div>
      <div class="bom1">
        <div class="dity" style="background: #e8f0fb;">
          <p class="oop" style="color: #5771ba;">干皮适用</p>
          <p class="oop1" style="color: #5771ba;">性价比推荐</p>
          <div class="oop2">
            <img src="./imgs/jifen_icon_fanhui(1).png" alt="" />
          </div>
        </div>
      </div>
      <div class="bom1">
        <div class="dity" style="background: #f8ecf3;">
          <p class="oop" style="color: #d74c80;">油皮适用</p>
          <p class="oop1" style="color: #d74c80;">清爽控油</p>
          <div class="oop2">
            <img src="./imgs/jifen_icon_fanhui(1).png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  methods: {
    onClickLeft() {
      Toast('返回')
    },
    callBack1() {
      console.log(111)
      this.$router.push({ name: 'add' })
    },
  },
}
</script>

<style lang="scss" scoped>
.appsy {
  width: 750px;
  height: 1624;
  padding: 20px;
  background: #bbd2f4;
}

.nav {
  margin-top: 10px;
  display: flex;
}
.nav img {
  width: 12px;
  height: 24px;
}
.nav span {
  font-size: 34px;
  position: relative;
  left: 300px;
  top: -10px;
}
.details {
  width: 710px;
  height: 354px;
  margin-top: 30px;
  background-color: #fff;
  border-radius: 30px;
  padding-top: 30px;
}
.details-1 {
  width: 680px;
  height: 226px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 30px;
}
.details-1 .fenlei {
  width: 150px;
  height: 96px;
  border: 1px dashed rgb(86, 79, 79);
}
.details-1 .fenlei img {
  width: 100%;
  height: 80%;
}
.details-1 .fenlei .ziti {
  font-size: 22px;
  text-align: center;
  position: relative;

  top: -20px;
}
.bom {
  width: 710px;
  height: 1054px;
  background-color: #fff;
  border-radius: 30px;
  margin-top: 50px;
  padding-top: 30px;
}
.bom .dity {
  width: 550px;
  height: 130px;
  margin: 0 auto;
  background: #d9e9ff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 40px;
  margin-bottom: 50px;
}
.bom .dity .oop {
  font-size: 34px;
  color: #4498f8;
}
.bom .dity .oop1 {
  margin-top: 10px;
  color: #4498f8;
}
.bom .dity .oop2 {
  width: 44px;
  height: 44px;
  background: #edf4fd;
  border-radius: 44px;
  position: relative;
  left: 400px;
  top: -60px;
}
.bom .dity .oop2 img {
  position: relative;
  top: 13px;
  left: 7px;
}
.bom .bom1 .biaoti {
  font-size: 34px;
  margin-left: 30px;
}
</style>
